<template>
  <template v-for="(item, index) in permissions">
    <div class="flex">
      <el-checkbox
        :label="item.code"
        size="large"
        class="ml-52"
        @change="emits('selectCheckbox', item)"
      >
        {{ item.name }}
      </el-checkbox>
      <template v-for="(methodItem, methodIndex) of item.method">
        <el-checkbox
          :label="methodItem.code"
          @change="emits('selectCheckbox', methodItem)"
        >
          {{ methodItem.name }}
        </el-checkbox>
      </template>
    </div>
    <template v-if="item.children && item.children.length > 0">
      <TreeCheckbox
        :permissions="item.children"
        @selectCheckbox="selectCheckbox"
      />
    </template>
  </template>
</template>
<script>
export default {
  name: "TreeCheckbox", //给组件命名
};
</script>

<script setup>
defineProps({
  permissions: {
    type: Array,
    default: [],
  },
});
const emits = defineEmits(["selectCheckbox"]);
const selectCheckbox = (item) => {
  emits("selectCheckbox", item);
};
</script>
